<template>

<div class="nav-home">
  <div class="nav"><nav-bar><div  slot="nav-center"><div>购物街</div></div></nav-bar></div>
  <div class="tab-control1"><tab-control @tabClick='tabClick' v-show="showimg" :titles="['流行','新款','精选']" ref="control1"/></div>
  <scroll class="content"
          ref="scrolltop"
          :probe-type='3' 
          @scroll='currtscroll'
          :pull-up-load='true'
          @pullingUp='moveload'
          >
  <home-swiper :banners='banner' @swiperimgload='swiperimgload' />
  <home-views :recommeds='recommed'/>
  <feature-view/>
  <div class="tab-control"><tab-control @tabClick='tabClick' :titles="['流行','新款','精选']" ref="control"/></div>
  <goods-list :gooddata="showControl" />
  </scroll>
 <!-- 可以一个组件绑定原生事件 navtive -->
  <scroll-top @click.native='scrolltop' v-show="showscroll" />
</div>
   
   

</template>

<script>

import HomeSwiper from './children/homeswiper'
import HomeViews from './children/homeviews'
import FeatureView from './children/featureview'

import NavBar from  'components/common/navbar/navbar'
import TabControl from 'components/content/tabcontrol/tabcontrol'
import GoodsList from 'components/content/goods/goodslist'
import Scroll  from 'components/common/scroll/scroll'
import ScrollTop from 'components/content/scrolltop/scrolltop'

import {homeMulData,homeDoodsData} from 'network/home'
export default {
  name:'Home',
  components: {
    HomeSwiper,HomeViews,FeatureView,NavBar,TabControl,GoodsList,Scroll,ScrollTop
  },
  data () {
    return {
       banner:[],  
       recommed:[],
    goods:{
      'pop':{page:0,list:[]},
      'new':{page:0,list:[]},
      'sell':{page:0,list:[]}
    },
    currentindex:'pop',
    showscroll:false,
    currentimg:0,
    showimg:false
    }
  },
  computed: {
    showControl(){
   return  this.goods[this.currentindex].list
    }
  },
    created () {
 
    //获取商城列表的头数据
    this.homeMulData()
    //获取商城列表的里流行，新款，精选
    this.homeDoodsData('pop')
    this.homeDoodsData('new')
    this.homeDoodsData('sell')
  
  },
  mounted () {
    const refresh=this.debounce(this.$refs.scrolltop.refresh,10)
      this.$bus.$on('loaditemimg',()=>{
      // this.$refs.scrolltop &&  this.$refs.scrolltop.refresh()
      refresh()
   
    }) 
  },
 
  methods: {
    //防抖函数
       debounce(func,delay){
      let time = null
      return function (...args){
        if(time) clearTimeout(time)
        time=setTimeout(()=>{ 
            func.apply(this,args)       
        },delay)
      }
    },
  //网络请求的一些方法
    homeMulData(){
    homeMulData().then(res=>{
    this.banner=res.data.banner.list
    this.recommed=res.data.recommend.list
   })
    },
   homeDoodsData(type){
   const page=this.goods[type].page +1
   
   homeDoodsData(type,page).then(res=>{
   this.goods[type].list.push(...res.data.list)
   this.goods[type].page+=1

   this.$refs.scrolltop.finishPullUp()
  
   })
  },
  //tab切换方法
  tabClick(index){
    switch(index){
      case 0:
        this.currentindex='pop'
        break;
      case 1:
        this.currentindex='new'
        break;
      case 2:
        this.currentindex='sell'
        break;
    }
    this.$refs.control.currtindex=index
    this.$refs.control1.currtindex=index
  },

  scrolltop(){
    // console.log('---')
    this.$refs.scrolltop.scrolltop(0,0)
  },

  currtscroll(position){
    // console.log(position)
    this.showscroll=Math.abs(position.y)>1000
    //console.log(this.currentimg)
    this.currentimg=Math.abs(position.y)>575 ? this.showimg=true : this.showimg=false
  },

  moveload(){
    this.homeDoodsData(this.currentindex)
  },
  //监听轮播图图片的高度
  swiperimgload(){
     this.currentimg=this.$refs.control.$el.offsetTop
    // console.log(this.currentimg)
    // console.log(this.$refs.control.$el.offsetTop)
    // console.log('------')
  }

  }
}
</script>

<style scoped>
  .nav-home{
    text-align: center; 
    /* position: relative; */
  
  }
  /* .tab-control{
    position:sticky;
    top:44px;
  } */
  .nav{
     background-color: var(--color-high-text);
    
  }
  .content{
  position: absolute;
  
  top: 44px;
  bottom: 49px;
  left: 0;
  right: 0;
  overflow: hidden;
  }
  .tab-control1{
    top: 44px;
    position: relative;
    z-index: 9;
  }

</style>